﻿
@{
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

    <body>
        <style>
            .imgbox {
                padding-top:10px;
            }
            .imgbox_li {
                display:inline-block;
                vertical-align:top;
                width:125px;
                height:125px;
                position:relative;
                margin-bottom:10px;
                box-sizing:border-box;
                padding:5px
            }
                .imgbox_li img {
                    display:block;
                    width:100%;
                    height:100%;
                    object-fit:cover
                }
            .close {
                position:absolute;
                top:0;
                right:0;
                padding:4px;
                cursor:pointer;
                font-size:24px !important;
            }
                .close:hover {
                    color:#ff0000;
                }
        </style>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form" lay-filter="example">
                    <div class="layui-form-item">
                        <label for="phone" class="layui-form-label">
                            <span class="x-red">*</span>
                            图片上传
                        <p class="x-red">500*500</p>
                        </label>
                        <div class="layui-input-block">
                            <div>
                                <label>
                                    <div type="button" class="layui-btn layui-btn-lg">点击上传</div>
                                    <input type="file" onchange="upper(event)" style="display:none" name="file" accept="image/*" multiple value="" />
                                </label>
                            </div>
                            <div class="imgbox">
                                
                            </div>
                            <input style="height:38px;" type="hidden" name="images" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>
                            标题
                        </label>
                        <div class="layui-input-inline">
                            <input style="height:38px;" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="phone" class="layui-form-label">
                            <span class="x-red">*</span>
                            QQ号
                        </label>
                        <div class="layui-input-inline">
                            <input style="height:38px;" type="text" required lay-verify="required" name="qq" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="phone" class="layui-form-label">
                            排序
                        </label>
                        <div class="layui-input-inline">
                            <input style="height:38px;" type="text" name="sork" value="1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            备注
                        </label>
                        <div class="layui-input-inline">
                            <input style="height:38px;" type="text" name="remark" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            是否启用
                        </label>
                        <div class="layui-input-inline" style="line-height: 38px;">
                            <input type="checkbox" checked name="Static" value="1" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>
                            内容
                        </label>
                    </div>
                    <div class="editor-area">
                        <div>
                            <script id="editor" type="text/plain">
                            </script>
                        </div>
                    </div>
                    @Html.AntiForgeryToken();
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-lg"  style="display:block;margin:auto" lay-filter="add" lay-submit="">
                            增加
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.all.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="~/ueditor/lang/zh-cn/zh-cn.js"></script>
        <script>
            //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor', {
           initialFrameWidth: 'auto',
            initialFrameHeight: 600,
            autoHeightEnabled: false,
            autoFloatEnabled:false

        });
             function closeimg(obj) {
                var index = $(obj).parent(".imgbox_li").index();
                 var v = $("input[name=images]").val().split(",");
                 v.splice(index, 1);
                 console.log(v.length)
                 if (v.length >= 1) {
                     $("input[name=images]").val(v.join(","))
                 } else {
                     $("input[name=images]").val("")
                 }
                 $(obj).parent().remove();
            }
        function upper(event) {
               
            upload(event.target.files);
        }
        //递归上传
        function upload(files) { 
            var $html = '<div class="imgbox_li"><a href="{href}" target="_blank" ><img src="{img}"  /></a><i class="close layui-icon layui-icon-close-fill" onclick="closeimg(this)" title="删除"></i></div>';
            if (files.length <= 0) {
                layer.alert("请上传图片");
            } else {
                var array = [];
                for (var i = 0; i < files.length; i++) {
                    array.push(files[i])
                }
                var formData = new FormData();
                formData.append('file', array[0])
                $.ajax({
                    url: '/Admin/homepage/UploadFile',
                    data: formData ,
			        type: "post",
			        async:true,
                    dataType: 'json',
                    processData: false,
			        contentType: false,
                    success: function (data) {
                        $html = $html.replace("{href}", data.data);
                        $html = $html.replace("{img}", data.data);
                        $(".imgbox").append($html);
                        var v = $("input[name=images]").val();
                        if (v == "") {
                            $("input[name=images]").val(data.data);
                        } else {
                            $("input[name=images]").val(v + "," +data.data);
                        }
                         
                    },  
			        error:function(xhr,errorText,errorType){
                         alert("error");
                    },
                    complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                        array.shift();
                        if (array.length>=1) {
                            upload(array)
                        }
			        }
		        })
            }
        }
           
        layui.use(['form', 'layer','element'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer
                form.on('switch(switchTest)', function(data){
                    if (!this.checked) {
                        layer.tips('关闭后前台将不展示本数据', data.othis)
                    }
                    var Static = this.checked ? '1' : '0';
                    $("input[name=Static]").val(Static)
                });
                //监听提交
                form.on('submit(add)',
                    function (data) {
                        if ($("input[name=images]").val() == "") {
                            layer.msg("请上传图片", { icon: 0, time: 2000 });
                            return false;
                        }
                    var dataf = data.field;
                        dataf["content"] = dataf.editorValue;
                    $.ajax({
                        url: '@Url.Action("AddProduct","Product",new { area="Admin"})',
                        data: dataf,
			            type: "post",
			            async:true,
			            dataType: 'json',
                        success: function (data) {
                            if (data.code == 200) {
                                //发异步，把数据提交给php
                                layer.alert(data.result, {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                            } else {
                                 layer.msg(data.result, { icon: 0, time: 2000 });
                            }
                        },
			            error:function(xhr,errorText,errorType){
                             alert("error");
                        },
			            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
				            if(status=='timeout'){
					            ajax.abort();
					            alert("请求超时");
				            }
			            }
		            })

                    return false;
                });

            });
        </script>
    </body>
